<template>
  <aside>
    <ul ref="flowMenu">
      <li v-for="(item, i) in menuList" :key="'key-' + i">
        <div class="menu-title">{{ item.name }}</div>
        <ol style="padding-left: 10px;">
          <li
            v-for="(node, n) in item.child"
            :key="'key-' + n"
            @mousedown="handlerMousedown($event, node)"
          >
            <MenuNode :id="node.id" :node="node" />
          </li>
        </ol>
      </li>
    </ul>
  </aside>
</template>
<script>
import MenuNode from "./modules/MenuNode";
import { deepClone } from "@/utils/taskflow";
export default {
  name: "FlowMenu",
  components: { MenuNode },
  data() {
    return {
      copyNode: null,
      nodePosition: {},
      nodeData: {},
      nodeData2: {},
      isAddNode: false,

      // node节点
      menuList: [
        {
          name: "逻辑控制",
          child: [
            {
              name: "开始",
              type: "controller-start-node",
              id: "controller-start-node",
            },
            {
              name: "结束",
              type: "controller-end-node",
              id: "controller-end-node",
            },
            {
              name: "循环",
              type: "controller-circle-start-node",
              id: "controller-circle-start-node",
            },
            /*{
              name: "循环止",
              type: "controller-circle-end-node",
              id: "controller-circle-end-node",
            },*/
            {
              name: "如果",
              type: "controller-if-start-node",
              id: "controller-if-start-node",
            },
            /*{
              name: "如果止",
              type: "controller-if-end-node",
              id: "controller-if-end-node",
            },*/
            {
              name: "路由",
              type: "controller-route-node",
              id: "controller-route-node",
            },
            {
              name: "数据汇聚",
              type: "controller-combine-node",
              id: "controller-combine-node",
            },
            {
              name: "continue",
              type: "controller-continue-node",
              id: "controller-continue-node",
            },
            {
              name: "break",
              type: "controller-break-node",
              id: "controller-break-node",
            },
            {
              name: "return",
              type: "controller-return-node",
              id: "controller-return-node",
            },
          ],
        },
        {
          name: "脚本",
          child: [
            {
              name: "定义变量",
              type: "code-define-var-node",
              id: "code-define-var-node",
            },
            {
              name: "js脚本",
              type: "code-js-code-node",
              id: "code-js-code-node",
            },
            {
              name: "sql脚本",
              type: "code-sql-code-node",
              id: "code-sql-code-node",
            }
          ],
        },
        {
          name: "取数器",
          child: [
            {
              name: "JDBC取数",
              type: "in-jdbc-node",
              id: "in-jdbc-node",
            },
            {
              name: "JDBC分页",
              type: "in-jdbc-page-node",
              id: "in-jdbc-page-node",
            },
            {
              name: "HTTP调用",
              type: "in-http-node",
              id: "in-http-node",
            },
            {
              name: "Excel取数",
              type: "in-excel-node",
              id: "in-excel-node",
            },
            {
              name: "校验组件",
              type: "in-validate-node",
              id: "in-validate-node",
            },
          ],
        },
        {
          name: "输出器",
          child: [
            {
              name: "日志输出",
              type: "out-log-node",
              id: "out-log-node",
            }/*,{
              name: "导出Excel",
              type: "out-excel-node",
              id: "out-excel-node",
            }*/,{
              name: "通知内容",
              type: "out-notify-info-node",
              id: "out-notify-info-node",
            },{
              name: "发送Email",
              type: "out-email-node",
              id: "out-email-node",
            },/*{
              name: "Http输出",
              type: "out-http-node",
              id: "out-http-node",
            },*/
          ],
        },
        {
          name: "数据采集(NoSql)",
          child: [
            {
              name: "入库(NoSql)",
              type: "nosql-save-node",
              id: "nosql-save-node",
            },
            {
              name: "分页(NoSql)",
              type: "nosql-page-node",
              id: "nosql-page-node",
            },
          ],
        },
        {
          name: "UI交互",
          child: [
            {
              name: "UI保存入参",
              type: "ui-in-param-node",
              id: "ui-in-param-node",
            },{
              name: "UI输出列表",
              type: "ui-out-data-node",
              id: "ui-out-data-node"
            },{
              name: "Token校验",
              type: "ui-token-node",
              id: "ui-token-node",
            }
          ],
        },
      ],
    };
  },
  mounted() {
    document.querySelector("#zll-index").onmousemove = (e) => {
      let event = e || window.event || event;
      if (this.copyNode) {
        let top = event.y - this.nodePosition.offsetY;
        let left = event.x - this.nodePosition.offsetX;

        this.copyNode.style.top = `${top}px`;
        this.copyNode.style.left = `${left}px`;

        // 菜单宽度
        let flowMenuWidth = this.$refs.flowMenu.offsetWidth;
        this.isAddNode = left - this.copyStyleLeft > flowMenuWidth ? true : false;
      }
    };
    document.querySelector("#zll-index").onmouseup = (e) => {
      let event = e || window.event || event;
      // this.$store.commit("taskflow/setNewNode", { state: false });
      if (this.copyNode) {
        this.copyNode.remove();
        this.copyNode = null;
        this.$store.commit("taskflow/setNewNode", {
          state: this.isAddNode,
          node: this.nodeData,
        });
        this.$emit("on-is-add-node", this.isAddNode);
      }
    };
  },
  methods: {
    handlerMousedown(e, item) {
      let event = e || window.event || event;
      let nodeEle = document.getElementById(item.id);
      let { left, top } = nodeEle.getBoundingClientRect();

      this.nodeData = Object.assign(deepClone(item), {
        x: event.clientX - left,
        y: event.clientY - top,
      });
      this.nodePosition = {
        offsetX: event.x - left,
        offsetY: event.y - top,
      };
      this.copyNode = nodeEle.cloneNode(true);
      this.copyNode.className += " copy";

      let y = event.y - this.nodePosition.offsetY;
      let x = event.x - this.nodePosition.offsetX;
      this.copyNode.style.top = `${y}px`;
      this.copyNode.style.left = `${x}px`;
      this.copyNode.style.borderBottom = 0;
      this.copyStyleLeft = x;
      nodeEle.parentNode.appendChild(this.copyNode);

      /*if (this.nodeData.type==='controller-if-start-node') {
        this.nodeData2 = Object.assign(deepClone(item), {
          x: event.clientX - left - 100,
          y: event.clientY - top,
        });
        let nodePosition2 = {
          offsetX: event.x - left - 100,
          offsetY: event.y - top,
        };
        let copyNode2 = nodeEle.cloneNode(true);
        copyNode2.className += " copy";
        copyNode2.name = '如果止1111'

        let y = event.y - nodePosition2.offsetY;
        let x = event.x - nodePosition2.offsetX - 100;
        copyNode2.style.top = `${y}px`;
        copyNode2.style.left = `${x}px`;
        copyNode2.style.borderBottom = 0;
        nodeEle.parentNode.appendChild(copyNode2);
      }*/

    },
  },
};
</script>

<style scoped lang="scss">
aside {
  padding: 0px;
  > ul {
    list-style: none;
    > li {
      margin-bottom: 10px;
      font-size: 14px;
      .menu-title {
        width: 100%;
        padding: 5px;
        margin-bottom: 5px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-top: 0px;
        font-size: 15px;
      }
      > ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        .copy {
          position: fixed;
          z-index: 1;
          opacity: 0.5;
        }
        > li {
          margin: 5px;
          > div {
            cursor: move;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
